<template>
	<view class="institution-card">
		<!-- 左侧内容：图标 + 红点 -->
		<view class="card-left">
			<image class="hospital-icon"
				src="https://cdn7.axureshop.com/demo/1881228/images/%E6%9C%BA%E6%9E%84%E7%AE%A1%E7%90%86/u5251.png">
			</image>
			<view class="dot"></view>
		</view>

		<!-- 中间内容：名称 + 距离 -->
		<view class="card-middle">
			<text class="institution-name">北京市怀柔区洛西社区卫生服务站</text>
			<text class="distance">距您3.6km</text>
		</view>

		<!-- 右侧箭头 -->
		<view class="card-right">

			<image class="arrow-icon" src="/static/arrow-righ.png"></image>

		</view>
	</view>
</template>

<script setup>

</script>

<style>
	.institution-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}


	.card-left {
		position: relative;
		display: flex;
		align-items: center;
	}


	.hospital-icon {
		width: 48px;
		height: 48px;
		margin-right: 10px;
	}



	.card-middle {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}


	.institution-name {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		margin-bottom: 4px;
	}

	/* 距离文本 */
	.distance {
		font-size: 14px;
		color: #999;
	}

	.card-right {
		display: flex;
		align-items: center;
	}


	.arrow-icon {
		width: 20px;
		height: 20px;
		color: #999;
	}
</style>